<template>
	<view class="page">
		<pageTxt>
			<!--  v-model="dataList" @query="queryList" -->
			<z-paging ref="paging" refresher-only @onRefresh="onRefresh" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<u-navbar title="质量验收详情" :autoBack="true" :fixed="false"></u-navbar>
					<view class="tab-box flex ac jb">
						<view class="u-tabs-box">
							<u-tabs
								:current="tabIndex"
								@click="tabClickFunc"
								:list="tablist"
								inactiveStyle="color: #919092;"
								activeStyle="color: #3B75FF;"
								:lineColor="tabIndex == '-1' ? '#ffffff' : '#3B75FF'"
							></u-tabs>
						</view>
						<view class="tabs-item" :class="hisShow ? 'tabs-item-active' : ''" @click="tabClickFunc({ index: '-1' })">历史记录</view>
					</view>
				</template>
				<!-- 内容 -->
				<view class="detail-content-box" v-if="dataObj">
					<u-empty
						v-if="!$fieldShowFunc('23-xmxx') && !$fieldShowFunc('23-zlys') && !$fieldShowFunc('zlys_ysbz')"
						marginTop="300rpx"
						icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png"
						text=" "
					></u-empty>
					<template v-if="!hisShow">
						<view class="item-box" v-if="$fieldShowFunc('23-xmxx')">
							<view class="title">项目信息</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zlys_xmmc')">
								<text class="txt">项目名称</text>
								<view class="content">
									{{ dataObj.project_name || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zlys_xmbh')">
								<text class="txt">项目编号</text>
								<view class="content flex ac">
									<text class="txt-btn" @click="navToProjectFunc">
										{{ dataObj.project_number || '--' }}
									</text>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zlys_xmpp')">
								<text class="txt">项目品牌</text>
								<view class="content flex ac">
									{{ dataObj.brand_name || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zlys_xmlx')">
								<text class="txt">项目类型</text>
								<view class="content flex ac">
									{{ dataObj.store_type_name || '--' }}
								</view>
							</view>
						</view>

						<view class="item-box" v-if="$fieldShowFunc('23-zlys')">
							<view class="title">质量验收</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zlys_ysjd')">
								<text class="txt">验收节点</text>
								<view class="content">
									{{ dataObj.node_name || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zlys_sftg')">
								<text class="txt">是否通过</text>
								<view class="content flex ac">
									{{ dataObj.is_completed == 1 ? '未完成' : '已完成' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zlys_yssqsj')">
								<text class="txt">验收申请时间</text>
								<view class="content flex ac">
									{{ dataObj.application_at || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zlys_ystgsj')">
								<text class="txt">验收通过时间</text>
								<view class="content flex ac">
									{{ dataObj.acceptance_at || '--' }}
								</view>
							</view>
						</view>
						<view class="item-box" v-if="$fieldShowFunc('zlys_ysbz')">
							<view class="title">验收标准</view>
							<template v-for="(item, index) in dataObj.criteria_list">
								<view class="item-box-item flex jb" :key="index">
									<view class="txt flex ac" :style="{ color: dataObj.node_status == 6 ? '#3B75FF' : '' }">
										<u-icon color="#3B75FF" size="24rpx" name="checkbox-mark" v-if="dataObj.node_status == 6"></u-icon>
										<text style="font-weight: bold">{{ `${index + 1}.` }}</text>
										{{ `${item.node_name}` }}
									</view>
									<view class="content" v-if="item.content_type == 1">
										{{ item.content || '--' }}
									</view>
									<view class="content flex ac flex" v-else>
										<image v-for="(i, k) in item.node_files" :key="k" :src="$fileImgFunc(i)" mode="aspectFill" class="img-box" @click="previewFunc(i)"></image>
									</view>
								</view>
							</template>
							<view class="item-box-item flex jb" v-if="dataObj.is_payment_review == 1">
								<view class="txt flex ac" :style="{ color: dataObj.node_status == 6 ? '#3B75FF' : '' }">
									<u-icon color="#3B75FF" size="24rpx" name="checkbox-mark" v-if="dataObj.node_status == 6"></u-icon>
									<text style="font-weight: bold">{{ `${dataObj.criteria_list.length + 1}.` }}</text>
									进度款
								</view>
								<view class="content">
									{{ dataObj.node_status == 6 ? '已收款' : '未收款'}}
								</view>
							</view>
						</view>
					</template>
					<template v-if="hisShow">
						<view class="item-box">
							<u-empty v-if="logList.length == 0" marginTop="300rpx" icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png" text=" "></u-empty>
							<u-steps current="0" direction="column" dot activeColor="#3b75ff" inactiveColor="#3b75ff">
								<u-steps-item v-for="(item, index) in logList" :key="index">
									<template slot="desc">
										<view class="steps-title flex ac jb">
											<view class="steps-title-title">{{ item.updated_at }}</view>
											<view class="steps-title-user-data-box flex ac jc">
												<image class="avater-box" :src="item.handlers_image" mode="aspectFit"></image>
												<view class="user-name u-line-1">
													{{ item.handlers_name + '-' + item.handlers_position }}
												</view>
											</view>
										</view>
										<view class="steps-desc">
											<view class="steps-desc-title">
												{{ item.content }}
											</view>
											<!-- 提交 -->
											<template v-if="item.log_status == 320 && $fieldShowFunc('zlys_ysbz')">
												<template v-for="(node, nodeIndex) in item.form_data.nodes">
													<!-- 文本 -->
													<view class="steps-desc-box ac flex" v-if="!node.file.length && node.name" :key="nodeIndex">
														<view class="steps-desc-box-title">
															<text style="font-weight: bold">{{ nodeIndex + 1 }}.</text>
															{{ node.name }}
														</view>
														<view class="steps-desc-box-desc">
															{{ node.content || '--' }}
														</view>
													</view>
													<!-- 文件 -->
													<view class="steps-desc-box ac" :key="nodeIndex" v-else>
														<view class="steps-desc-box-title">
															<text style="font-weight: bold">{{ nodeIndex + 1 }}.</text>
															{{ node.name }}
														</view>
														<view class="steps-desc-box-desc flex ac flex-wrap">
															<template v-for="(file, index_) in node.file">
																<image class="img-box" :key="index_" :src="$fileImgFunc(file)" @click="previewFunc(file)"></image>
															</template>
														</view>
													</view>
												</template>
											</template>
											<!-- 审核 -->
											<template v-if="(item.log_status == 330 || item.log_status == 340) && $fieldShowFunc('zlys_ysbz')">
												<template v-for="(node, nodeIndex) in item.form_data.node_data.criteria_list">
													<view class="steps-desc-box" :class="node.content_type == 2 ? '' : 'flex'" :key="nodeIndex">
														<view
															class="steps-desc-box-title flex ac"
															:style="item.form_data.data_arr[nodeIndex].audit_state == 2 ? 'color:#3b75ff;' : 'color:#FE5454;'"
														>
															<view style="margin-right: 12rpx">
																<u-icon
																	color="#3B75FF"
																	size="24rpx"
																	name="checkbox-mark"
																	v-if="item.form_data.data_arr[nodeIndex].audit_state == 2"
																></u-icon>
																<u-icon color="#FE5454" size="24rpx" name="close" v-else></u-icon>
															</view>
															<text style="font-weight: bold">{{ nodeIndex + 1 }}.</text>
															{{ node.node_name }}
														</view>
														<!-- 文本 -->
														<view class="steps-desc-box-desc" v-if="node.content_type == 1">
															{{ node.content || '--' }}
														</view>
														<!-- 文件 -->
														<view class="steps-desc-box-desc" v-else>
															<image
																class="img-box"
																v-for="(file, index_) in node.node_files"
																:key="index_"
																:src="$fileImgFunc(file)"
																@click="previewFunc(file)"
															></image>
															<template v-if="!node.node_files.length">--</template>
														</view>
													</view>
													<view class="steps-desc-box flex ac" :key="nodeIndex + 'a'">
														<view class="steps-desc-box-title">审批意见：</view>
														<view class="steps-desc-box-desc">
															{{ item.form_data.data_arr[nodeIndex].reason_rejection || '--' }}
														</view>
													</view>
												</template>
											</template>
										</view>
									</template>
								</u-steps-item>
							</u-steps>
						</view>
					</template>
				</view>
				<view class="bottom-btn-box flex ac jb" slot="bottom">
					<view style="width: 100%" v-if="!loading">
						<judgeBtn info :per_arr="per_arr" :btns="btns" :state="dataObj.node_status" :item="dataObj" @change="btnsChange"></judgeBtn>
					</view>
				</view>
			</z-paging>
		</pageTxt>
		<!-- 文件预览 -->
		<preFileCom :fileObj="fileObj" @onFileSuccess="fileObj = ''"></preFileCom>
		<!-- 操作组件 -->
		<qualityAcceptanceOperate :value.sync="per_name" :oper_item="oper_item" @submit="handleSubmit"></qualityAcceptanceOperate>
	</view>
</template>

<script>
export default {
	data() {
		return {
			fileObj: '',
			loading: false,
			tabIndex: 0,
			hisShow: false,
			tablist: [],
			dataObj: '',
			logList: [],
			per_arr: [], //权限列表
			// 操作按钮
			btns: [
				{
					per_name: 'qualityAcceptance_check',
					state: 1,
					name: '申请节点验收'
				},
				{
					per_name: 'qualityAcceptance_examine',
					state: 2,
					name: '审核节点验收'
				},
				{
					per_name: 'node_reexamine',
					state: 3,
					name: '复审节点验收'
				}
			],
			// 操作相关
			per_name: '',
			oper_item: {}
		};
	},
	onLoad(option) {
		if (option.node_list) {
			let list = JSON.parse(option.node_list);
			list.forEach((item) => {
				item.name = item.node_name;
			});
			let index = JSON.parse(option.node_list).findIndex((item) => {
				return item.id == option.id;
			});
			this.tablist = list;
			this.tabIndex = index;
			this.qualityAcceptanceDetails(option.id);
		}
		// 获取权限
		this.$Api
			.getHtmlAuthority({
				path: '/qualityAcceptance'
			})
			.then((res) => {
				console.log(res, 'getHtmlAuthority');
				if (res.code == 200) {
					this.per_arr = res.data.permission;
				}
			});
	},
	onShow() {
		if (this.dataObj) {
			this.qualityAcceptanceDetails(this.dataObj.id);
		}
	},
	methods: {
		// 操作反馈
		handleSubmit(e) {
			this.onRefresh();
		},
		// 操作事件
		btnsChange(e) {
			console.log(e);
			this.per_name = e.per_name;
			this.oper_item = e.item;
		},
		onRefresh() {
			this.qualityAcceptanceDetails(this.dataObj.id);
			this.$refs.paging.complete();
		},
		tabClickFunc(e) {
			if (e.index == '-1') {
				this.hisShow = !this.hisShow;
				return;
			}
			this.tabIndex = e.index;
			this.hisShow = false;
			if (e.id) {
				this.qualityAcceptanceDetails(e.id);
			}
		},
		// 详情
		qualityAcceptanceDetails(node_id) {
			this.loading = true;
			this.$Apipc
				.qualityAcceptanceDetails({
					node_id
				})
				.then((res) => {
					console.log(res, '质量验收详情');
					this.loading = false;
					if (res.code == 200) {
						res.data.log_list.forEach((item) => {
							item.form_data = JSON.parse(item.form_data);
							if (item.form_data.nodes) {
								let nodes = item.form_data.nodes.filter((node) => node.name);
								item.form_data.nodes = nodes;
							}
						});
						this.dataObj = res.data;
						this.logList = res.data.log_list;
					}
				});
		},
		// 预览
		previewFunc(item) {
			console.log(item);
			this.fileObj = item;
		},
		// 去详情项目
		navToProjectFunc() {
			uni.navigateTo({
				url: '/pagesB/projectDetail/projectDetail?id=' + this.dataObj.project_id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import 'qualityAcceptanceDetail.scss';
</style>
